.Page {
  width: 100%;
  height: 100dvh;
  padding: 50px 50px 50px 130px;
}

.Calendar {
  position: relative;
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr;
  column-gap: 3px;

  background-size: calc(100% / 5) calc(100% / var(--hours-shown));

  @media (prefers-color-scheme: light) {
    background-image:
      linear-gradient(to right, #d5d5d5 1px, transparent 1px),
      linear-gradient(to bottom, #e2e2e2 1px, transparent 1px);
  }

  @media (prefers-color-scheme: dark) {
    background-image:
      linear-gradient(to right, #303030 1px, transparent 1px),
      linear-gradient(to bottom, #161616 1px, transparent 1px);
  }
}

.HourLabels {
  position: absolute;
  text-align: right;
  top: -0.75em;
  left: -60px;
  height: 100%;
  width: 50px;
  box-sizing: border-box;
  font-size: 0.75rem;
  color: var(--color-gray-500);
  pointer-events: none;
  display: grid;
  grid-template-rows: repeat(var(--hours-shown), 1fr);
}

.Event {
  z-index: 10;
  position: relative;
  border-radius: 4px;
  box-sizing: border-box;
  background: linear-gradient(135deg, rebeccapurple, indigo);
  padding: 4px;
  min-height: max(calc(100% / var(--hours-shown) * 0.5), 2em);
  font-size: 0.875rem;
  user-select: none;
  box-shadow:
    0.5px 1px 0.5px rgb(255 255 255 / 0.2) inset,
    -0.5px -1px 1px rgb(0 0 0) inset;

  @media (prefers-color-scheme: light) {
    color: var(--color-gray-50);
  }

  &:hover {
    background: linear-gradient(135deg, rgb(107 64 151), indigo);
  }

  .Title {
    opacity: 0.9;
  }

  .Time {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 0.75rem;
    opacity: 0.75;
  }
}

.Positioner {
  z-index: 20;
  --easing: cubic-bezier(0.22, 1, 0.36, 1);
  --animation-duration: 0.35s;

  width: var(--positioner-width);
  height: var(--positioner-height);
  max-width: var(--available-width);

  transition-property: top, left, right, bottom, transform;
  transition-timing-function: var(--easing);
  transition-duration: var(--animation-duration);

  &[data-instant] {
    transition: none;
  }
}

.EventDetails {
  box-sizing: border-box;
  padding: 1rem 1.5rem 1.5rem;
  border-radius: 0.5rem;
  background-color: canvas;
  color: var(--color-gray-900);
  transform-origin: var(--transform-origin);
  z-index: 20;
  overflow: clip;
  position: relative;

  transition-property: width, height, transform, opacity;
  transition-timing-function: ease-out;
  transition-duration: 150ms;

  width: var(--popup-width, auto);
  height: var(--popup-height, auto);
  min-width: 350px;

  &[data-starting-style],
  &[data-ending-style] {
    opacity: 0;
    transform: scale(0.9);
  }

  @media (prefers-color-scheme: light) {
    outline: 1px solid var(--color-gray-200);
    box-shadow:
      0 10px 15px -3px var(--color-gray-200),
      0 4px 6px -4px var(--color-gray-200);
  }

  @media (prefers-color-scheme: dark) {
    outline: 1px solid var(--color-gray-300);
    outline-offset: -1px;
  }

  .Header {
    display: flex;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-gray-200);
  }

  .EventTitle {
    flex-grow: 1;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.2;
  }

  .EventTime {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin-bottom: 0.75rem;
  }

  .EventImageWrapper {
    width: 500px;
    height: 333px;
  }

  .EventActions {
    display: flex;
    gap: 0.5rem;
  }

  .EventLocation {
    font-size: 0.875rem;
    color: var(--color-gray-700);
    margin-bottom: 0.75rem;
  }

  .EventDescription {
    font-size: 0.875rem;
    color: var(--color-gray-700);
    margin-bottom: 0.75rem;
  }

  .EventDescription,
  .EventLocation,
  .EventImageWrapper {
    &:last-child {
      margin-bottom: 0;
    }
  }
}
